<template>
  <!-- <div class="head">
    <img src="@/assets/touxiang.png">
    <h1>登录者账号</h1>
    <button @click="esc()">退出</button>
  </div>
 <div class="big">
   <div class="body">
    <div class="add">
      <router-link to="/home/add">添加人员</router-link>
      <router-link to="/home/list">人员列表</router-link>
    </div>
  </div>
 </div> -->
 <div class="homecom">
   <!-- 调用子组件-头部组件 -->
   <HomeHeader/>
   <!-- 中间区域 -->
   <main>
    <!-- 调用子组件-左侧导航栏 -->
    <HomeSlide/>

    <!-- 右侧：根据菜单链接进行路由的渲染 -->
    <aside>
      <router-view/>
    </aside>
   </main>
 </div>
</template>

<script>
import HomeHeader from './HomeHeader.vue';
import HomeSlide from './HomeSlide.vue';
export default {
  name:'HomeCom',
  data(){

  },
  components:{
    HomeHeader,HomeSlide
  },
  methods:{
    esc(){
      sessionStorage.clear();
      this.$router.push('/login')
    }
  }

}
</script>

<style>
/* .head{
  width: 100%;
  background-color: #e81c20;
  height: 100px;
  display: flex;
}
.head img{
  width: 70px;
  height: 70px;
  left: 2%;
  top: 20px;
  position: absolute;
  
}
.head h1{
  position: relative;
  left: 100px;
}
.head button{
  position: relative;
  left: 150px;
  height: 20px;
  top: 30px;
}
.big{
  width: 100%;
  height: 800px;
  display: flex;
}
.body{
  display: flex;
  background-color:#f8acc8 ;
  width: 100%;
}
.body .add{
  background-color: #f87c20;
  width: 200px;
  height: 100%;
  display: flex;
   flex-direction: column;
} */
 .homecom{
  width: 100%;
  height: 98vh;
  overflow: hidden;
 }
 .homecom main{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
 }
 .homecom main aside{
  width: 80%;
  height: 100%;
  background:  linear-gradient(45deg, #ff6b6b 0%, #4ecdc4 100%);
 }
</style>